<template>
  <div class="Warehousing">
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      width="30%">
      <el-form ref="ruleForm" :model="formLabelAlign" :rules="rules" label-width="100px" >
        <el-form-item :label="labelTitle|titleFilter">
          <el-select v-model="formLabelAlign.id" clearable filterable>
            <el-option
              v-for="item in toolingList"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
          </el-select>

        </el-form-item>
        <el-form-item :label="labelTitle|numFilter" prop="nums" >
          <el-input v-model="formLabelAlign.nums" onkeyup="this.value = this.value.replace(/[^\d.]/g,'')"/>
        </el-form-item>
        <el-form-item :label="$t('remark')">
          <el-input
            v-model="formLabelAlign.remark"
            type="textarea"
            rows="3"
            maxlength="200"
            show-word-limit/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button icon="el-icon-circle-close" @click="closeDialog">{{
          $t("cancel")
        }}</el-button>
        <el-button icon="el-icon-receiving" type="primary" @click="enterTooling('ruleForm')">{{ $t('confirm') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import toolingBasicInfo from '@/api/Tooling/toolingBasicInfo'
import mySetting from '@/mixins/mySetting'
import networkTips from '@/mixins/networkTips'
import i18n from '@/locale'
export default {
  name: 'Warehousing',
  components: {},
  filters: {
    titleFilter(val) {
      const titleMap = {
        'in': i18n.t('enterToolingBarcode'),
        'out': i18n.t('ScrapToolingBarcode')
      }
      return titleMap[val]
    },
    numFilter(val) {
      const numMap = {
        'in': i18n.t('enterNums'),
        'out': i18n.t('ScrapNums')
      }
      return numMap[val]
    }
  },
  mixins: [mySetting, networkTips],
  data() {
    const validateNums = (rule, value, callback) => {
      if (!value) {
        const numMap = {
          'in': i18n.t('enterNums'),
          'out': i18n.t('ScrapNums')
        }
        callback(new Error(`${this.$t('pleaseInput')}${numMap[this.labelTitle]}`))
      } else {
        callback()
      }
    }
    return {
      title: '',
      labelTitle: '',
      toolingList: [],
      dialogFormVisible: false,
      formLabelAlign: {},
      rules: {
        nums: [{ validator: validateNums, required: true, trigger: 'blur' }]
      },
      value: ''
    }
  },
  methods: {
    enterTooling(val) {
      if (this.labelTitle === 'in') {
        this.validationForm(val, this.doSave)
      } else if (this.labelTitle === 'out') {
        // 不为别的,语义化
        this.validationForm(val, this.doScrapped)
      }
    },
    // 入库
    doSave() {
      toolingBasicInfo.enterTooling({ ...this.formLabelAlign, actionType: 4 }).then(res => {
        this.netTips(res, this.handleUpdate, this.closeDialog)
      })
    },
    // 触发父组件更新
    handleUpdate() {
      this.$emit('initList')
    },
    // 报废
    doScrapped() {
      toolingBasicInfo.scrapTooling({ ...this.formLabelAlign, actionType: 5 }).then(res => {
        this.netTips(res, this.handleUpdate, this.closeDialog)
      })
    },
    // 获取备件下拉框数据
    async getToolingBarcodeList() {
      const res = await toolingBasicInfo.getToolingBarcodeList({ mode: 2 })
      this.toolingList = res.data
    },
    // 打开弹窗
    openDialog(val, label, info) {
      this.title = val
      this.labelTitle = label
      this.dialogFormVisible = true
      this.getToolingBarcodeList()
      this.$nextTick(() => {
        this.$refs['ruleForm'].clearValidate()
      })
    },
    closeDialog() {
      Object.assign(this.$data, this.$options.data.call(this))
    }
  }
}
</script>
<style lang='scss' scoped>
.el-select{
  width: 100%;
}
</style>
